<script setup>
import { ref } from 'vue'
import TitleValue from '@components/TitleValue'
import { common, service } from '@utils'

defineProps({
    statuss: Array
})

const visible = ref(false)
const data = ref()

const open = (value) => {
    data.value = value
    visible.value = true
    getGroup()
    getRole()
}

const close = () => {
    visible.value = false
    data.value = {}
}

const getGroup = async () => {
    if (!data.value.groupCode || data.value.groupCode.length === 0) return
    const res = await service.auth.groupAll({ companyCode: data.value.companyCode })
    let map = {}
    res.forEach(item => {
        map[item.code] = item.label
    })
    data.value.groupName = data.value.groupCode.map(item => {
        return map[item] || ''
    }).join(',')
}

const getRole = async () => {
    if (!data.value.roleCode || data.value.roleCode.length === 0) return
    const res = await service.auth.roleAll({ companyCode: data.value.companyCode })
    let map = {}
    res.forEach(item => {
        map[item.code] = item.label
    })
    data.value.roleName = data.value.roleCode.map(item => {
        return map[item] || ''
    }).join(',')
}


//把方法暴露给父组件
defineExpose({
    open
})
</script>

<template>
    <el-dialog v-model="visible" title="详情" center @close="close" destroy-on-close>
        <section v-if="data">
            <el-row>
                <el-col :span="12">
                    <title-value title="登录名" :value="data.username" />
                </el-col>
                <el-col :span="12">
                    <title-value title="昵称" :value="data.name" />
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <title-value title="手机号" :value="data.phone" />
                </el-col>
                <el-col :span="12">
                    <title-value title="邮箱" :value="data.email" />
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <title-value title="所属商户" :value="data.companyName" />
                </el-col>
                <el-col :span="12">
                    <title-value title="所属部门" :value="data.departName" />
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <title-value title="所属岗位" :value="data.stationName" />
                </el-col>
                <el-col :span="12">
                    <title-value title="所属用户组" :value="data.groupName" />
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <title-value title="角色" :value="data.roleName" />
                </el-col>
                <el-col :span="12">
                    <title-value title="状态" :value="common.getValueByKey('val', data.status, statuss, 'label')" />
                </el-col>
            </el-row>
        </section>
    </el-dialog>
</template>
    